<template>
  <div id="echartContainer2"></div>
</template>

<script>

  export default {
    name: 'component2',
    props: {
      positionByLanguage: {
        default: function () {
          return [0, 0, 0, 0, 0]
        }
      }
    },
    data() {
      return {
        option: {
          title: {
            text: '开发语言招聘量',
            color: 'white',
            textStyle: {
              fontSize: 18,//字体大小
              color: '#ffffff',//字体颜色
              margin: [0, 0, 0, 10]
            },
          },
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              show: false,
              type: 'value'
            }
          ],
          yAxis: [
            {
              type: 'category',
              data: ['Java', 'PHP', 'C++', 'iOS', 'Python'],
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#2599A0'
                }
              },
            }
          ],
          series: [
            {
              name: '直接访问',
              type: 'bar',
              barWidth: '60%',
              data: [10, 52, 200, 334, 390]
            }
          ]
        }
      };
    },
    methods: {
      drawBarChart() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('echartContainer2'));
        // 绘制基本图表

        //加载动画
        // myChart.showLoading();
        myChart.setOption(this.option);
        //             myChart.hideLoading();

      },
      setNewData(data) {
        var myChart = this.$echarts.getInstanceByDom(document.getElementById('echartContainer2'));
        myChart.setOption({
          series: [{data: data}]
        });
      }

    },
    watch: {
      positionByLanguage: function () {

        var myChart = this.$echarts.getInstanceByDom(document.getElementById('echartContainer2'));
        if (!this.positionByLanguage) {
          return false
        }
        console.info("positionByLanguage Changed");
        myChart.setOption({
          series: [{data: this.positionByLanguage}]
        });
      }
    },
    mounted() {
      //调用drawBarChart()
      this.drawBarChart();
    }
  };
</script>
<style scoped>
  #echartContainer2 {
    width: 100%;
    height: 100%;
  }
</style>
